<script  lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import { provide, ref } from 'vue'
import Editor from '@/packages/Editor'
import data from './data.json'
import { registerConfig as config } from '@/utils/editorConfig'
export default {
  components: {
    Editor
  },
  setup() {
    const state = ref(data)

    provide('config', config) // 将组件配置直接抛出

    return {
      state
    }
  }
}
</script>

<template>
  <Editor v-model="state" class="app" />
</template>

<style scoped lang="scss">
.app {
  position: fixed;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
}
#material {
  background: red;
}
#container {
  background: yellow;
}
#operate {
  background: blue;
}
#edit {
  background: red;
}
</style>
